import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeListItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150.0,
      margin: EdgeInsets.only(top: 10.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                "https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=3298592356,862880221&fm=85&s=BB26C20413A2D1575A2A60C2030070BB"
              ),
              fit: BoxFit.cover
            )
          ),
          child: Stack(
            children: <Widget>[
              Positioned(
                top: 13.0,
                left: 0,
                right: 0,
                child: Container(
                  height: ScreenUtil().setWidth(43.0),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: Row(
                          children: getTags(),
                        ),
                      ),
                      ItemProgressWidget(progress: 16.2)
                    ],
                  ),
                )
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  color: Color.fromRGBO(0, 0, 0, .5),
                  padding: EdgeInsets.symmetric(
                    horizontal: ScreenUtil().setWidth(25.0),
                    vertical: ScreenUtil().setWidth(15.0)
                  ),
                  child: Column(
                    children: <Widget>[
                      Text('这是标题这是标题'),
                      Row(
                        children: <Widget>[
                          
                        ],
                      )
                    ],
                  ),
                ),
              )
            ]
          )
        ),
      ) 
    );
  }
  List<TagWidget> getTags() {
    return [
      TagWidget(tagName: '公开', tagColor: Colors.blue, tagIndex: 0),
      TagWidget(tagName: '抽奖', tagColor: Colors.red, tagIndex: 1),
    ];
  }
}

class ItemProgressWidget extends StatelessWidget {
  final double progress;

  ItemProgressWidget({
    Key key,
    @required this.progress
  }) : super(key: key);

  @override 
  Widget build(BuildContext context) {
    String progressText = '';
    if (progress.toInt() == 100) {
      progressText = '已完成';
    } else if(progress.toInt() == 0) {
      progressText = '未开始';
    } else {
      progressText = '学习中 ${progress.toInt()}%';
    }
    return Container(
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(ScreenUtil().setWidth(43.0 / 2)), 
          bottomLeft: Radius.circular(ScreenUtil().setWidth(43.0 / 2))
        ),
        child: Container(
          height: ScreenUtil().setWidth(43.0),
          color: Color.fromRGBO(0, 0, 0, .5),
          padding: EdgeInsets.symmetric(horizontal: 15.0),
          child: Center(
            child: Text(progressText, style: TextStyle(color: Colors.white))
          )
        ),
      )
    );
  } 

}


class TagWidget extends StatelessWidget {

  final int tagIndex;
  final String tagName;
  final Color tagColor;

  TagWidget({
    Key key,
    @required this.tagName,
    @required this.tagColor,
    @required this.tagIndex
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var tagLeft = tagIndex == 0 ? 25.0 : 10.0; 
    return Container(
      margin: EdgeInsets.only(left: ScreenUtil().setWidth(tagLeft)),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(ScreenUtil().setWidth(43.0 / 2)),
        child: Container(
          color: tagColor,
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          height: ScreenUtil().setWidth(43.0),
          child: Center(
            child: Text(tagName, style: TextStyle(color: Colors.white))
          ),
        )
      )
    );
  }
}